<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- css -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
          crossorigin="anonymous">

    <!-- /css -->

    <!-- style -->
    <style>
        .home-article-title {
            text-decoration: none;
            font-size: xx-large;
        }
    </style>
    <!-- /style-->
    <title>LSC's Blog</title>
</head>
<body>
<!-- nav bar-->
<nav class="navbar navbar-expand-lg  navbar-light bg-light fixed-top">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">LSC's Blog</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <!-- 主页 -->
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                </li>
                <!-- /主页 -->

                <!-- 归档页 -->
                <li class="nav-item">
                    <a class="nav-link" th:href="@{'/archive'}">Archive</a>
                </li>
                <!-- /归档页 -->

                <!-- 标签页 -->
                <li class="nav-item">
                    <a class="nav-link" th:href="@{'/tag'}">Tag</a>
                </li>
                <!-- /标签页 -->

                <!-- 下拉框 -->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                       data-bs-toggle="dropdown" aria-expanded="false">
                        Dropdown
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                </li>
                <!-- /下拉框 -->

                <!-- 灰色标签 -->
                <li class="nav-item">
                    <a class="nav-link disabled">Disabled</a>
                </li>
                <!-- /灰色标签 -->
            </ul>
            <!-- 搜索框 -->
            <form class="d-flex">
                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
            <!-- /搜索框 -->
        </div>
    </div>
</nav>
<!-- /nav bar-->

<!-- body -->
<div class="album py-5 bg-light">
    <div class="container">
        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
            <!-- 单个博文展示项 -->
            <div class="col" th:each="article:${articles}">
                <div class="card shadow-sm">
                    <!-- 图片 -->
                    <svg class="bd-placeholder-img card-img-top" width="100%" height="225"
                         xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: صورة مصغرة"
                         preserveAspectRatio="xMidYMid slice" focusable="false">
                        <title>Placeholder</title>
                        <rect width="100%" height="100%" fill="#55595c"></rect>
                        <text x="50%" y="50%" fill="#eceeef"
                              dy=".3em">图片中的文本
                        </text>
                    </svg>
                    <!-- /图片 -->

                    <!-- 卡片下半部分 -->
                    <div class="card-body">
                        <div class="align-items-center">
                            <a class="home-article-title" th:href="@{'/detail/'+ ${article.articleId}}"
                               th:text="${article.articleTitle}"></a>
                        </div>

                        <div class="d-flex justify-content-between align-items-center">
                            <!--                            <div class="btn-group">-->
                            <!--                                <button type="button" class="btn btn-sm btn-outline-secondary">按钮1</button>-->
                            <!--                                <button type="button" class="btn btn-sm btn-outline-secondary">按钮2</button>-->
                            <!--                            </div>-->
                            <!--                            <small class="text-muted">文本</small>-->
                        </div>
                    </div>
                    <!-- /卡片下半部分 -->
                </div>
            </div>
            <!-- /单个博文展示项 -->
        </div>
    </div>
</div>
<!-- /body -->

<!-- 分页 -->
<nav aria-label="Page navigation example">
    <ul class="pagination justify-content-center">
        <!-- 首页 -->
        <li class="page-item">
            <a class="page-link" th:href="@{/home}">首页</a>
        </li>
        <!-- /首页 -->

        <!-- 上页 -->
        <li class="page-item">
            <a class="page-link" th:if="${not articles.isFirst()}"
               th:href="@{'/page/' + ${articles.getNumber() - 1}}">上页</a>
        </li>
        <!-- /上页 -->

        <li class="page-item">
            <a class="page-link" th:if="${not articles.isFirst()}" th:href="@{'/page/' + ${articles.getNumber() - 1}}"
               th:text="${articles.getNumber() - 1}"></a>
        </li>

        <!-- 本页 -->
        <li class="page-item active" aria-current="page">
            <a class="page-link" th:href="@{'/page/' + ${articles.getNumber()}}" th:text="${articles.getNumber()}"></a>
        </li>
        <!-- /本页 -->

        <li class="page-item">
            <a class="page-link" th:if="${not articles.isLast()}"
               th:href="@{'/page/' + ${articles.getNumber() + 1}}"
               th:text="${articles.getNumber() + 1}"></a>
        </li>

        <!-- 下页 -->
        <li class="page-item">
            <a class="page-link" th:if="${not articles.isLast()}"
               th:href="@{'/page/' + ${articles.getNumber() + 1}}">下页</a>
        </li>
        <!-- /下页 -->

        <!-- 尾页 -->
        <li class="page-item">
            <a class="page-link" th:href="@{'/page/' + ${articles.getTotalPages() - 1}}">尾页</a>
        </li>
        <!-- /尾页 -->
    </ul>
</nav>
<!-- /分页 -->

<!-- footer -->
<div class="container">
    <footer class="py-3 my-4">
        <ul class="nav justify-content-center border-bottom pb-3 mb-3">
            <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Home</a></li>
            <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Features</a></li>
            <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Pricing</a></li>
            <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">FAQs</a></li>
            <li class="nav-item"><a href="#" class="nav-link px-2 text-muted">About</a></li>
        </ul>
        <p class="text-center text-muted">© 2021 Company, Inc</p>
    </footer>
</div>
<!-- /footer -->

<!-- js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        crossorigin="anonymous"></script>

<!-- /js -->
</body>
</html>